import {ThemeContext} from '../contexts/theme-context';

function ThemeTogglerButton() {
  // Theme Toggler 按钮不仅仅只获取 theme 值，
  // 它也从 context 中获取到一个 toggleTheme 函数
  return (
    <ThemeContext.Consumer>
      {
        (
          {theme, toggleTheme}) => {
            return <button
              onClick={toggleTheme}
              style={{
                color: theme.color,
                backgroundColor: theme.background
            }}>
              Toggle Theme
            </button>
          }
      }
    </ThemeContext.Consumer>
  );
}

export default ThemeTogglerButton;